﻿<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>


<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>
<base href="<%=basePath%>">

<html>
<head>
    <title>Title</title>
    <style>
        #submit{
            position: absolute;
            top: 7px;

        }

    </style>
<%--        <script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>--%>
        <script src="js/jquery.min.js"></script>
<%--    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>--%>
    <script>
        function addTr(id) {
            var table = $('#tablelist-choose');
            //获取被选中的tr 的文本值
            var name = $('#' + id).children().eq(1).text();

            var Category = $('#' + id).children().eq(2).text();
            var Department = $('#' + id).children().eq(3).text();
            var Price = $('#' + id).children().eq(4).text();
            var Unit = $('#' + id).children().eq(5).text();


            var nameTd = $('<td>' + name + '</td>');
            var CategoryTd = $('<td>' + Category + '</td>');
            var DepartmentTd = $('<td>' + Department + '</td>');
            var PriceTd = $('<td>' + Price + '</td>');
            var UnitTd = $('<td>' + Unit + '</td>');

            var tr = $('<tr></tr>')
            tr.attr('id', id + '-choonse');
            tr.append(nameTd);
            tr.append(CategoryTd);
            tr.append(DepartmentTd);
            tr.append(PriceTd);
            tr.append(UnitTd);

            table.append(tr);
        }

        $(document).ready(function () {
            $('.packagetablelist input:checkbox').click(function () {

                var id = $(this).val();
                var check = $(this).is(':checked');

                $.post(
                    "portfolio/findByPid"+id,
                    function (data) {

                        if (check){
                            //清空表格

                            $('.tablelist-choose tr :first').remove();
                            for (var pid in data){

                                addTr(data[pid]);

                            }
                        }else {

                            for (var pid in data){
                                $('#' + data[pid] + '-choonse').remove();
                            }
                        }
                    }



                );
            });


            $('.tablelist input:checkbox').click(
                function () {

                    var id = $(this).val();
                    var check = $('#' + id + 'input').is(':checked');
                    //如果被选中 否则删除对应的一列
                    if (check) {
                        addTr(id);
                    } else {
                        //删除对应行
                        $('#' + id + '-choonse').remove();
                    }
                }
            )
        });
    </script>
</head>
<body>



<form action="Listing/Listing" method="post">

    <input type="text" name="card">







    <div>
        <table class="packagetablelist">
            套餐列表
            <tr>
                <th>选择</th>
                <th>套餐编号</th>
                <th>套餐名称</th>
                <th>套餐项目</th>
                <th>价格</th>
            </tr>
            <c:forEach var="pack" items="${packages}">
                <tr id="p${pack.packageID}">
                    <td><input name="check" type="checkbox" value="${pack.packageID}"/></td>
                    <td>${pack.packageID}</td>
                    <td>${pack.packageName}</td>
                    <td>${pack.packageProject}</td>
                    <td>${pack.packagePrice}</td>
                </tr>
            </c:forEach>
        </table>
    </div>
    <br>
    <div>
        <table class="tablelist">
            1 .请选择需要检查的项目
            <tr>

                <th>选择</th>
                <th>组合项目名称</th>
                <th>项目类别</th>
                <th>所属科室</th>
                <th>价格</th>
                <th>项目单位</th>

            </tr>



            <c:forEach var="por" items="${portfolios}">
            <tr id="${por.portfolioId}">
                <td><input name="check" type="checkbox" value="${por.portfolioId}" id="${por.portfolioId}input"/></td>
                <td>${por.portfolioName}</td>
                <td>${por.portfolioCategory}</td>
                <td>${por.portfolioDepartment}</td>
                <td>${por.portfolioPrice}</td>
                <td>${por.portfolioUnit}</td>
            </tr>


                <%--        function getCheckBoxValue() {--%>

                <%--        var id = "";--%>
                <%--        $("input[name=checkbox]").each(function () {--%>
                <%--        if ($(this).attr("checked")) {--%>
                <%--        id += $(this).val() + " ";--%>
                <%--        }--%>
                <%--        });--%>

                <%--        $.ajax({--%>
                <%--        url: "change,php",--%>
                <%--        type: "post",--%>
                <%--        dataType: "json",--%>
                <%--        data: {id: id},--%>
                <%--        success: function (data) {--%>
                <%--        alert(data.msg);--%>
                <%--        location.reload();--%>
                <%--        },--%>
                <%--        error: function () {--%>

                <%--        }--%>
                <%--        });--%>


                <%--            remove() - 删除被选元素（及其子元素）--%>
                <%--            empty() - 从被选元素中删除子元素--%>
            </c:forEach>
            <input type="submit"  value="提交开单" id="submit">

</form>
</table>
</div>


<div style="margin-top: 1rem">
    <table id="tablelist-choose" border="1px">
        已选择项目
        <tr>
            <th>组合项目名称</th>
            <th>项目类别</th>
            <th>所属科室</th>
            <th>价格</th>
            <th>项目单位</th>
        </tr>

    </table>
</div>


</body>


</html>